<template>
  <view class="bg " >
    <view class="withdraw__top">
      <view class="amount ">
        <text>¥</text>
        <view>{{balance.totalBalance}}</view>
      </view>
      <view class="amount__title">累计赚取金额</view>
      <view class="withdraw__amount">
        <view>可提现金额{{balance.usableBalance}}元</view>
        <view @click="toWithdraw">
          <text>去提现</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
    </view>
    <view class="withdraw__list ">
      <u-tabs :list="tabsList"
              :is-scroll="false"
              :show-bar="false"
              active-color="#6BAEFF"
              inactive-color="#AEB3C0"
              :current="query.status" @change="change"></u-tabs>
      <view class="list " v-for="list in applyList" :key="list.id">
        <view :class="['list-left',list.status == 2 ? 'invalid-color':'']">
          <text class="apply__name">{{list.userName}}申请了提现</text>
          <text class="apply__card">银行卡:{{list.bankCard.bankNumber}}</text>
          <text class="apply__time" v-if="list.status == 1">{{list.finishTime}}</text>
          <text class="apply__time" v-if="list.status == 0">{{list.createTime}}</text>
        </view>
        <view class="list-right invalid-color" v-if="list.status == 0">
          +{{list.withdrawAmount}}
        </view>
        <view class="list-right " v-if="list.status == 1">
          +{{list.withdrawAmount}}
        </view>

        <view class="list-right invalid-color" v-if="list.status == 2">
          {{list.withdrawAmount}}
        </view>
      </view>
      <u-loadmore v-if="applyList.length > 9" :status="loadingStatus" :margin-top="40" :margin-bottom="40" @loadmore="loadingMore" />
      <u-empty v-if="applyList.length == 0" text="暂无数据" mode="data" viewHeight="80"></u-empty>

    </view>
    <w-loading text="加载中..." mask="true" click="true" ref="loading"></w-loading>
    <u-toast ref="uToast"/>

  </view>
</template>
<script>
import {getBalance,applyList} from "../../api/withdraw";
import {cardList} from "../../api/bankCard";

export default {

  data() {
    return {
      tabsList: [{
        name: '申请中'
      }, {
        name: '已提现'
      }, {
        name: '已驳回',
      }],
      loadingStatus:'loadmore',
      current: 1,
      //金额数据
      balance:{},
      //提现申请列表
      applyList:[],
      //请求列表数据
      query:{
        status:1,
        pageNum:1,
        pageSize:10,
      },
      //是否现实骨架屏
      loading:true,
      totalPage:"",
    }
  },
  onLoad(){
  },
  onShow(){

    this.getBalanceInfo();
    this.getList(1);
  },

  methods:{
    //获取余额操作
    getBalanceInfo(){
      getBalance().then(res =>{
        this.balance = res.data;
      })
    },
    //前往提现
    toWithdraw(){
      cardList().then(res =>{
        if (res.data.length > 0){
          uni.navigateTo({
            url:"/pages/withdraw/withdraw"
          })
        }else {
          this.$refs.uToast.show({
            title: '请添加银行卡',
            type: 'error',
            url: '/pages/bankCard/addCard'
          })
        }
      })
    },
    //查询代理商提现列表
    //type 1首次加载 2分页数据
    getList(type){
      this.loadingStatus = "loading";
      applyList(this.query).then(res =>{
        if (res.code == 200){
          if (type == 1){
            this.applyList = res.rows;
          }
          if (type == 2){
            this.applyList.push.apply(this.applyList,res.rows)
          }
          this.totalPage = Math.ceil(res.total / this.query.pageSize)
          if (this.query.pageNum < this.totalPage) {
            this.loadingStatus = "loadmore"
          }
          if (this.query.pageNum >= this.totalPage) {
            this.loadingStatus = "nomore"
          }
        }
      }).catch(err =>{
      })
    },
    change(index) {
      console.log(index);
      this.query = {
        pageNum: 1,
        pageSize: 10,
        status:index
      }
      this.getList(1);
    },
    //加载更多
    loadingMore(){
      if (this.query.pageNum <= this.totalPage) {
        this.query.pageNum += 1;
        this.getList(2)
      }
    }
  },
  onReachBottom() {

  }
}
</script>

<style lang="scss" scoped>
.bg{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: linear-gradient(180deg, #4090EC 0%, #FFFFFF 100%);
}
.withdraw__top{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  margin-top: 20rpx;
  .amount{
    display: flex;
    align-items: center;
    >text{
      font-size: 56rpx;
      margin-top: 8rpx;
      margin-right: 10rpx;
    }
    >view{
      font-size: 78rpx;

    }
  }
  .withdraw__amount{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    height: 74rpx;
    margin: 30rpx auto;
    border-radius: 16rpx;
    background: rgba(255,255,255,0.2);
    padding: 0 20rpx;
  }
}
.invalid-color{
  color: #AEB3C0!important;
}
.withdraw__list{
  width: 90%;
  height: calc(100vh - 400rpx);
  margin: 0 auto;
  min-height: 300rpx;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 20rpx 0;
  overflow-y:auto;

}
.list{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px solid rgba(151, 151, 151, 0.16);;
  padding: 15rpx 0;
  .list-left{
    color: #2E3C4D;
    >text{
      display: block;
      margin: 5rpx 0;
    }
    .apply__name{
      font-size: 30rpx;
      font-weight: bold;
    }

  }
  .list-right{
    font-size:44rpx;
    color: #D43F3D;
  }
}


</style>
